<template>
  <div>
    list
    <div style="padding: 20px; background-color: rgb(61, 126, 255)">
      <a-space direction="vertical" fill>
        <a-input-search
          search-button
          :style="{ width: '320px' }"
          placeholder="Please enter something"
        />
        <a-tree
          style="background-color: white"
          :fieldNames="{
            title: 'name',
            icon: 'customIcon',
          }"
          :data="treeData"
        >
          <template #icon>
            <IconStar />
          </template>
        </a-tree>
      </a-space>
    </div>
    <!-- <a-layout>
        <a-layout-sider theme="dark">Sider</a-layout-sider>
        <a-layout-content>Content</a-layout-content>
      </a-layout> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';

  const treeData = [
    {
      key: 1,
      name: '成品',
      Materialproduct: 1,
      created: new Date(),
      number: 1,
      status: 1,
      remarks: '无',
      children: [
        {
          key: 2,
          name: '电脑1',
          Materialproduct: 1,
          created: new Date(),
          status: 1,
          number: 1,
          remarks: '无',
          children: [
            {
              key: 3,
              name: '电脑1-1',
              Materialproduct: 1,
              status: 1,
              created: new Date(),
              number: 1,
              remarks: '无',
            },
          ],
        },
        {
          key: 4,
          code: 'kg',
          name: '电脑2',
          status: 1,
          Materialproduct: 1,
          created: new Date(),
          number: 1,
          remarks: '无',
        },
      ],
    },
    {
      key: 5,
      name: '半成品',
      Materialproduct: 2,
      created: new Date(),
      number: 1,
      status: 2,
      remarks: '无',
    },
  ];
</script>

<style scoped lang="less"></style>
